<template>
    <div class="VonBDUInput">
        <div class="title">{{title}}</div>
        <el-select
                clearable
                placeholder=""
                v-bind="$attrs"
                v-on="$listeners"
                size="mini"
                :style="customStyle"
                v-if="isSelect">
            <el-option value="OFF" label="OFF">OFF</el-option>
            <el-option value="ON" label="ON">ON</el-option>
        </el-select>
        <el-select
                clearable
                placeholder=""
                v-bind="$attrs"
                v-on="$listeners"
                size="mini"
                :style="customStyle"
                v-if="isSelectPassage_DT">
            <el-option :value="index+1" :label="item.detectionPoint" v-for="(item,index) in PassageWays.DT">{{item.detectionPoint}}</el-option>
        </el-select>
        <el-select
                clearable
                placeholder=""
                v-bind="$attrs"
                v-on="$listeners"
                size="mini"
                :style="customStyle"
                v-if="isSelectPassage_NY">
            <el-option :value="index+1" :label="item.detectionPoint" v-for="(item,index) in PassageWays.NY">{{item.detectionPoint}}</el-option>
        </el-select>
        <el-select
                clearable
                placeholder=""
                v-bind="$attrs"
                v-on="$listeners"
                size="mini"
                :style="customStyle"
                v-if="isSelectPassage_YJ">
            <el-option :value="index+1" :label="item.detectionPoint" v-for="(item,index) in PassageWays.YJ">{{item.detectionPoint}}</el-option>
        </el-select>
        <el-select
                clearable
                placeholder=""
                v-bind="$attrs"
                v-on="$listeners"
                size="mini"
                :style="customStyle"
                v-if="isVoltageMode">
            <el-option value="DC" label="DC">DC</el-option>
            <el-option value="AC" label="AC">AC</el-option>
        </el-select>
        <el-select
                clearable
                placeholder=""
                v-bind="$attrs"
                v-on="$listeners"
                size="mini"
                :style="customStyle"
                v-if="isResistanceMode">
            <el-option value="I" label="I">I</el-option>
            <el-option value="R" label="R">R</el-option>
        </el-select>
        <el-select
                clearable
                placeholder=""
                v-bind="$attrs"
                v-on="$listeners"
                size="mini"
                :style="customStyle"
                v-if="isConductionMode">
            <el-option value="ON" label="ON">ON</el-option>
            <el-option value="OFF" label="OFF">OFF</el-option>
        </el-select>
        <el-input
            v-if="!isVoltageMode && !isSelectPassage_DT && !isSelectPassage_NY && !isSelectPassage_YJ  && !isSelect && !isResistanceMode && !isConductionMode"
            clearable
            :style="customStyle"
            v-bind="$attrs"
            v-on="$listeners"
            size="mini"
        >
        </el-input>
        <div :style="{color:'white',fontSize: '12px',marginLeft:'5px',marginRight:'10px'}">{{append}}</div>
    </div>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    name: "VonBDUInput",
    data(){
        return{
          customStyle:{
            width: '80px',
            height: '24px',
            fontSize: '16px!important',
            fontWeight: 'bold',
            color: '#00FFDB',
          },
        }
    },
    props:{
      append:{
        type:String,
        default:''
      },
      isConductionMode:{
        type:Boolean,
        default: false
      },
      isResistanceMode:{
        type:Boolean,
        default: false
      },
      isVoltageMode:{
        type:Boolean,
        default: false
      },
      isSelectPassage_DT:{
        type:Boolean,
        default: false
      },
      isSelectPassage_NY:{
        type:Boolean,
        default: false
      },
      isSelectPassage_YJ:{
        type:Boolean,
        default: false
      },
      isSelect:{
        type:Boolean,
        default: false
      },
      isCenter:{
        type:Boolean,
        default: false
      },
      title:{
        type:[String,Number],
        default:''
      }
    },
    computed: {
      ...mapState({
        PassageWays: state => state.base.PassageWays
      })
    }
  }
</script>

<style scoped lang="scss">
    .VonBDUInput{
        display: flex;
        align-items: center;
        margin: 8px 0;
        .title{
            width: 132px;
            margin:0 10px;
            text-align: left;
            line-height: 24px;
            height: 24px;
            color: white;
        }
    }
</style>
